<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script>
        var doc = document,
            docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 12 * (clientWidth / 320) + 'px';
            };
        if (!!doc.addEventListener) {
            window.addEventListener(resizeEvt, recalc, false);
            doc.addEventListener('DOMContentLoaded', recalc, false);
        }
    </script>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="format-detection" content="telephone=no">
    <title>健康处方</title>
    <link rel="Shortcut Icon" href="images/logo.gif">
    <link rel="stylesheet" href="libs/reset.css">
    <link rel="stylesheet" href="libs/swiper/css/swiper.min.css">
    <style>
        html,
        body {
            box-sizing: border-box;
            width: 100%;
            height: 100%;
            -webkit-overflow-scrolling:touch;
            -webkit-user-select:none;
        }
        body{
            padding-top: 13rem;
            color: #333;
        }
        li{list-style: none;}
        a{text-decoration: none;color: #333;-webkit-tap-highlight-color:transparent;}
        .fix-wrap{
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            z-index: 9;
        }
        .swiper-container{
            position: relative;
            overflow: hidden;
        }
        .banner .swiper-wrapper li{
            width: 100%;
            height: 13rem;
        }
        .banner .swiper-wrapper img{
            width: 100%;
            height: 100%;
        }
        .banner .swiper-pagination {
            text-align: right;
        }
        .banner .swiper-pagination-bullet-active{
            background: #fff
        }
        .banner .swiper-pagination-bullet{
            width: .5rem;
            height: .5rem
        }
        .list{
            display: -webkit-flex;
            display: flex;
            -webkit-flex-wrap: wrap;
                    flex-wrap: wrap;
        }

        .list li{
            position: relative;
            width: 50%;
            height: 7rem;
            background: url(images/class.png) no-repeat center 0.666667rem;
            background-size: auto 56%;
        }
        .list li:nth-child(2n):after{
            content: "";
            position: absolute;
            z-index: -1;
            top: 1rem;
            width: 1px;
            height: 5rem;
            background: linear-gradient(to right, #e4e4e4 50%,transparent 50%) no-repeat;
            background-size: 1px 100%;
        }
        .list a{
            -webkit-display: flex;
            display: flex;
            -webkit-flex-direction: column;
            flex-direction: column;
            -webkit-justify-content: flex-end;
            justify-content: flex-end;
            position: absolute;
            bottom: 0;
            box-sizing: border-box;
            vertical-align: bottom;
            width: 100%;
            height: 100%;
            line-height: 2;
            background: linear-gradient(0deg,#e4e4e4 50%,transparent 50%) no-repeat 0 bottom;
            background-size: 100% 1px;
            text-align: center;
        }
        .list li:active{
            background-color: #eee;
        }
    </style>
</head>

<body>
    <div class="fix-wrap">
        <div class="banner swiper-container">
            <ul class="swiper-wrapper">
                <li class="swiper-slide"><img src="images/wx-1.jpg"></li>
                <li class="swiper-slide"><img src="images/wx-2.jpg"></li>
                <li class="swiper-slide"><img src="images/wx-3.jpg"></li>
                <li class="swiper-slide"><img src="images/wx-4.jpg"></li>
            </ul>
            <div class="swiper-pagination"></div>
        </div>
    </div>
    <div class="list">
        <li><a href="jkcf3_small_class.html">大类名称</a></li>
        <li><a href="/">大类名称</a></li>
        <li><a href="/">大类名称</a></li>
        <li><a href="/">大类名称</a></li>
        <li><a href="/">大类名称</a></li>
    </div>
    <script src="./libs/zepto.min.js"></script>
    <script src="libs/fastclick.js"></script>
    <script src="./libs/swiper/js/swiper.jquery.min.js"></script>
    <script>
    $(function() {
        FastClick.attach(document.body);
        // 轮播图
        new Swiper('.banner',{
            loop: true,
            autoplay: 8000,
            pagination: '.swiper-pagination',
            touchRatio: 0.5
        });
    })
    </script>
</body>

</html>
